<template>
  <div class="stat-card" :class="`stat-card--${color}`">
    <div class="stat-card__icon">
      <el-icon><component :is="resolvedIcon" /></el-icon>
    </div>
    <div class="stat-card__content">
      <div class="stat-card__title">{{ title }}</div>
      <div class="stat-card__value">{{ formattedValue }}</div>
      <div class="stat-card__change" :class="{ 'stat-card__change--positive': isPositive }">
        {{ change }}
        <el-icon>
          <component :is="isPositive ? 'ArrowUp' : 'ArrowDown'" />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 统计数据卡片组件
 * 
 * 用于在Dashboard中展示关键指标数据，包括数值、变化趋势和图标
 */
import { computed } from 'vue'
import * as ElementPlusIcons from '@element-plus/icons-vue'

const props = defineProps({
  /**
   * 卡片标题
   */
  title: {
    type: String,
    required: true
  },
  
  /**
   * 数值
   */
  value: {
    type: [Number, String],
    required: true
  },
  
  /**
   * 变化趋势（如 +12%）
   */
  change: {
    type: String,
    default: '--'
  },
  
  /**
   * 图标名称
   * 使用 Element Plus 的图标名
   */
  icon: {
    type: String,
    default: 'DataAnalysis'
  },
  
  /**
   * 卡片颜色风格
   * 支持 primary, success, warning, danger, info
   */
  color: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
  }
})

/**
 * 将数值格式化为更易读的形式
 * 例如：1234 -> 1,234
 */
const formattedValue = computed(() => {
  if (typeof props.value === 'number') {
    return props.value.toLocaleString()
  }
  return props.value
})

/**
 * 根据变化值确定是正增长还是负增长
 * 用于显示不同颜色的变化指示器
 */
const isPositive = computed(() => {
  return props.change.startsWith('+')
})

/**
 * 解析Element Plus图标组件
 * 将字符串转换为对应的图标组件
 */
const resolvedIcon = computed(() => {
  return ElementPlusIcons[props.icon] || ElementPlusIcons.DataAnalysis
})
</script>

<style lang="scss" scoped>
.stat-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px;
  border-radius: $radius-medium;
  background-color: $bg-base;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
  }
  
  // 图标容器
  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background-color: rgba($primary-color, 0.1);
    
    .el-icon {
      font-size: 32px;
      color: $primary-color;
    }
  }
  
  // 内容区域
  &__content {
    flex: 1;
    min-width: 0;
  }
  
  // 标题
  &__title {
    font-size: 14px;
    color: $text-secondary;
    margin-bottom: 8px;
  }
  
  // 数值
  &__value {
    font-size: 24px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 4px;
  }
  
  // 变化趋势
  &__change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: $danger-color;
    
    &--positive {
      color: $success-color;
    }
  }
  
  // 不同颜色变体
  &--primary {
    .stat-card__icon {
      background-color: rgba($primary-color, 0.1);
      
      .el-icon {
        color: $primary-color;
      }
    }
  }
  
  &--success {
    .stat-card__icon {
      background-color: rgba($success-color, 0.1);
      
      .el-icon {
        color: $success-color;
      }
    }
  }
  
  &--warning {
    .stat-card__icon {
      background-color: rgba($warning-color, 0.1);
      
      .el-icon {
        color: $warning-color;
      }
    }
  }
  
  &--danger {
    .stat-card__icon {
      background-color: rgba($danger-color, 0.1);
      
      .el-icon {
        color: $danger-color;
      }
    }
  }
  
  &--info {
    .stat-card__icon {
      background-color: rgba($info-color, 0.1);
      
      .el-icon {
        color: $info-color;
      }
    }
  }
}
</style> 